<template>
    <div>
        <form action="/">
            <van-search v-model="value" shape="round" show-action :placeholder="value" @search="onSearch"
                @cancel="onCancel" />
        </form>
            <van-grid :column-num="2" :border="false" :gutter="5" >
                <van-grid-item v-for="item,index in list" :key="index"  >
                    <div class="tupian">
                        <img class="tupianimg" :src="item.img">
                    </div>
                    <div class="SSFtext">{{item.text}}</div>
                    <div class="SSFping">
                        {{item.dianping}}&nbsp;
                        参考价&nbsp;￥{{item.ckprc}}
                    </div> 
                </van-grid-item>
            </van-grid>
    </div>
</template>

<script setup>
import { ref, onMounted,reactive,watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { showToast } from 'vant';
import {getSearchData} from '@/api/bangdan'
const route = useRoute()
const router = useRouter()
const value = ref('');
let Skey = ref('')
const list = ref()
//获取传来的路由信息
value.value = route.query.value
//搜索函数
const searchDataF=async (val)=>{
    // 根据val的值，向后台发送搜索请求
        let res = await getSearchData(val)
        console.log(res.data.page.list);
        // 将获取到的数据渲染到页面
        list.value = res.data.page.list
}
//判断搜索内容函数
const IsSearch = (val)=>{
    // 判断内容是否满足搜索函数的条件，不满足提示信息
    if(val!='口红' && val!='面膜'){
       return alert('请输入口红或面膜测试搜索功能')
    }else{
        // 满足条件发送请求
        if(val=='口红'){
            searchDataF('key=1')
        }else{
            searchDataF('key=2')
        }
    }
}

onMounted(()=>{
    IsSearch(value.value)
})
//回车后触发list数据更新
const onSearch = async(val) => {
    IsSearch(val)
};

const onCancel = () => {
    //清空列表内容
    list.value=''
    // 跳转页面
    router.replace('/bottomlist')
}
</script>

<style lang="scss" scoped>
.van-grid-item{

.van-grid-item__content {


.tupian{
    width: 160px;
    height: 210px;
    padding-bottom: 5px;
    .tupianimg{
        width: 160px;
        height: 210px;
        border-radius: 10px;
    }
}
.SSFtext{
    font-size: 12px;
    color: #333333;
    width: 159px;
    height: 18px;
    justify-content: center;
    text-overflow :ellipsis;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    
}
.SSFping{
    width: 159px;
    height: 15px;
    color: #999999;
    font-size: 10px;
    
}
}
}
</style>